<template>
    <el-card>
        <div class="flex items-center flex-jc-sb">
            <div class="fs-14 bold">数据汇总</div>
            <customSelectDate :date-value="1" v-model:value-list="dateList"/>
        </div>
        <div v-for="(i, index) in listdata" :key="index" class="mg-t-16">
            <div class="fs-14 title-through">{{ i.name }}</div>
            <div class="flex gap-8px mg-t-16">
                <div v-for="(item, index) in i.data" :key="index" class="flex-1 flex-item">
                    <div class="fs-14 fc-grey mg-b-10">{{ item.name }}</div>
                    
                    <div v-if="item.value || item.value === 0" class="flex flex-ai-end">
                        <CountUp class="fs-24 bold fm-din-bold" :end-val="item.value" :decimalPlaces="item.decimal || 0"/>
                        <span class="fs-12 mg-l-5">{{ item.suffix }}</span>
                    </div>
                    <div v-else class="fs-24 bold">--</div>
                </div>
            </div>
        </div>
    </el-card>
</template>
<script setup>
import { ref, watch } from 'vue'
import wnumb from 'wnumb'
import CountUp from 'vue-countup-v3'
const format = wnumb({
	thousand: ','
})
const props = defineProps({
    title: {
        type: String
    },
    list: {
        type: Array
    },
    type: {
        type: String,
        default: ''
    },
    selectValue: {
        type: [String, Number]
    },
    detail: {
        type: Object
    }
})

const emits = defineEmits(['update:selectValue', 'change', 'update:dateList'])

const dateList = ref([])

const listdata = ref({
    payOperate: {
        name: '运营数据',
        data: {
            payNum: {
                name: '发薪笔数',
                value: '',
                suffix: '笔'
            },
            payMoneyCount: {
                name: '发薪金额',
                value: '',
                suffix: '元',
                decimal: 2
            },
            paidCount: {
                name: '已领薪人数',
                value: '',
                suffix: '人'
            },
            paidMoney: {
                name: '已领薪金额',
                value: '',
                suffix: '元',
                decimal: 2
            },
        }
    },
    projectCount: {
        name: '项目统计',
        data: {
            dailyProjectCount: {
                name: '需打卡项目',
                value: '',
                suffix: '项'
            },
            quickProjectCount: {
                name: '快速发薪项目',
                value: '',
                suffix: '项'
            },
            longTimeProjectCount: {
                name: '无打卡项目',
                value: '',
                suffix: '项'
            },
            pcProjectCount: {
                name: 'PC发薪项目',
                value: '',
                suffix: '项'
            },
        }
    }
})

const emitsData = () => {
    // emits('update:selectValue', sltVal.value);
    // emits('change', sltVal.value);
}

const handleChange = () => {
    emitsData()
}

watch(() => props.selectValue, (newval) => {
    // sltVal.value = newval
}, {
    immediate: true
})

watch(() => props.detail, (newval) => {
    if (newval && Object.keys(newval).length) {
        for(const key in listdata.value.payOperate.data) {
            listdata.value.payOperate.data[key].value = newval.payOperate[key]
        }
        for(const key in listdata.value.projectCount.data) {
            listdata.value.projectCount.data[key].value = newval.projectCount[key]
        }
    }
}, {
    immediate: true,
    deep: true
})

watch(dateList, (newval) => {
    emits('update:dateList', newval)
}, {
    immediate: true,
    deep: true
})
</script>
<style lang="scss" scoped>
.flex-item {
    background: #FAFAFC;
    border-radius: 5px;
    padding: 12px;
}
.title-through {
    position: relative;
    &::after {
        display: block;
        content: '';
        width: calc(100% - 70px);
        height: 1px;
        background: #F4F4F7;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }
}
</style>